<!-- 页面的html -->
<template>
  <div>
    <div class="title">这是我做的VUE页面，hello world</div>
    <div v-text="title"></div>
    <div v-text="html"></div>
    <div v-html="html"></div>
    <div>插值表达式：{{ title }}</div>
    <div>插值表达式：{{ html }}</div>
    <div>{{ age < 18 ? "未成年" : "成年" }}</div>
    <hr>
    <!-- 逻辑判断指令 -->
    <div v-if="user == null">
      <button>登录</button>
    </div>
    <div v-else-if="user.username == null">
      通过删除元素来控制隐藏
    </div>
    <div v-else>
      {{ user.username }}
    </div>
    <div v-show="age == 1">
      控制隐藏是通过display:none,来控制隐藏
    </div>

    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in userList" :key="index">
        <td>{{index +1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<!-- 组件的js -->
<script>
// 数据驱动视图，通过修改数据来影响界面的变化
export default {
  name: "MyComp",
  // 定义组件的数据
  data() {
    return {
      title: "天亮教育",
      html: `<h1>测试</h1>`,
      age: 18,
      // user: null,
      user: {
        username: "Cyrus"
      },
      userList: [
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
        {name: "张三", age: 18},
      ]
    }
  }
}
</script>

<!-- 写的时组件的css -->
<style>
.title {
  color: red;
}
</style>
